<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布任务</title>
    <script src="../../js/flexible.js"></script>
    <script src="../../js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="../../css/zyj/faburenwu.css">
    <link rel="stylesheet" href="../../css/common/header-footer.css">
    <link rel="stylesheet" href="../../css/common/base.css">
</head>
<body>
    <!-- 发布任务整体页面 -->
    <header>
        <div class="header_top">
            <img src="../../img/信号组.png" alt="">
            <span class="header_time">上午 9:51</span>
            <span class="ht_right">
                <img src="../../img/蓝牙图标.png" alt="">
                <img src="../../img/电量百分比.png" alt="">
                <img src="../../img/电量图标.png" alt="">
            </span>
        </div>
        <div class="header_bottom">
            <div class="hb_left">
                <img src="../../img/返回按钮-1.png" alt="">
                <!-- 需要更改title文字 -->
                <span class="title"><a href="../../html/trm/shouye.html">发布任务</a></span>
            </div>
            <div class="hb_right">
                <img src="../../img/组 -1.png" alt="">
            </div>
        </div>
    </header>
    <div class="faburenwu">
        <div class="top">
            <ul>
                <li>
                    <a href="../../html/zyj/shouhuodizhi.html">
                        <div class="dizhi">
                            <img src="../../img/位置 (-1.png" alt="">
                            <input type="text" placeholder="请选择收货地址">
                            <img src="../../img/组 154.png" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    
                        <div class="dizhi" id="id1">
                            <img src="../../img/时间.png" alt="">
                            <input type="text" placeholder="请设定送达时间">
                            <img src="../../img/组 154.png" alt="">
                        </div>
                    
                </li>
            </ul>
        </div>
        <!-- 填写帮办事件 -->
        <div class="write">
            <div class="write_title">
                 <span>填写帮办事件</span>
            </div>
            <div class="write_main">
                <div class="write_btn">
                    <button class="btn_1">代取件</button>
                    <button class="btn_2">拿外卖></button>
                    <button class="btn_2">其他</button>
                </div>
                <div class="write_footer">
                    <input type="text" placeholder="其他（手动输入）">
                </div>   
            </div>
            
        </div>
        <!-- 跑腿费 -->
        <div class="foot">
            <div class="foot_title">
                <span>跑腿费</span>
            </div>
            <div class="foot_main">
               <div class="hongbao">
                   <span>红包</span>
                   <span>1个可用红包
                       <img src="../../img/组 154.png" alt="">
                   </span>
               </div>
               <div class="price">
                   <div class="price_left">
                       <span>酬金</span>
                       <span>费用越高接单越快哦~</span>
                   </div>
                   <div class="price_btn">
                       <button>3元</button>
                       <button>4元</button>
                       <button>5元</button>
                   </div>
                   <div class="price_right">
                       <img src="../../img/组 154.png" alt="">
                   </div>
               </div>
            </div>           
        </div>
        <!-- 其他 -->
        <div class="qita">
            <div class="qita_title">
                <span>其他</span>
            </div>
            <div class="qita_main">
                <div class="method" id="id2">
                    <span>支付方式</span>
                    <span>
                        <img src="../../img/组 154.png" alt="">
                    </span>
                </div>
                <div class="tips">
                    <span>备注</span>
                    <span>单号或取餐号</span>
                </div>
                <div class="rad_1">
                    <input type="checkbox" class="ra1" id="rad1_input">
                    <label for="rad1_input" class="rad1_label"></label>
                </div>
                <div class="rad_2">
                    <input type="checkbox" class="ra2" id="rad2_input">
                    <label for="rad2_input" class="rad2_label"></label>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_main">
            <div class="footer_left">
                <div class="footer_left_top">
                    <span>新人券</span>
                    <span>减</span>
                    <span>￥3</span>
                </div>
                <div class="footer_left_bottom">
                    <span>共计</span>
                    <span>￥0</span>
                </div>
            </div>
            <div class="footer_right">
                <span><a href="../../html/zyj/fabuwancheng.html">提交订单</a></span>
            </div>
        </div>
        <div class="time_zz" id="id3">
            <div class="time">
                <div class="time_center">
                    <div class="line_1">
                        <div>17</div>
                        <div>55</div>
                    </div>
                    <div class="line_2">
                        <div>18</div>
                        <div>:</div>
                        <div>00</div>
                    </div>
                    <div class="line_3">
                        <div>19</div>
                        <div>05</div>
                    </div>
                </div>
                <button class="time_btn" id="id4">确认</button>
            </div>
        </div>
        <div class="zhifubao_zz" id="id5">
            <header>
                <div class="header_top">
                    <img src="../../img/信号组.png" alt="">
                    <span class="header_time">上午 9:51</span>
                    <span class="ht_right">
                        <img src="../../img/蓝牙图标.png" alt="">
                        <img src="../../img/电量百分比.png" alt="">
                        <img src="../../img/电量图标.png" alt="">
                    </span>
                </div>
                <div class="header_bottom">
                    <div class="hb_left">
                        <img src="../../img/返回按钮-1.png" alt="">
                        <!-- 需要更改title文字 -->
                        <span class="title"><a href="../../html/zyj/faburenwu.html">发布任务</a></span>
                    </div>
                    <div class="hb_right">
                        <img src="../../img/组 35.png" alt="">
                    </div>
                </div>
            </header>
            <div class="zhifu">
                <div class="weixin" id="id6">
                    <div class="weixin_left">
                        <img src="../../img/微信.png" alt="">
                        <span>微信支付</span>
                    </div>
                    <div class="weixin_right">
                        <input type="radio" class="weixin_btn" id="wb">
                        <label for="wb" class="weixin_label"></label>
                    </div>   
                </div>
                <div class="zhifubao" id="id7">
                    <div class="zhifubao_left">
                        <img src="../../img/支付宝.png" alt="">
                        <span>支付宝</span>
                    </div>
                    <div class="zhifubao_right">
                        <input type="radio" class="zhifubao_btn" id="zfb">
                        <label for="zfb" class="zhifubao_label"></label>
                    </div>   
                </div>
            </div>
        </div>
        
    </div>
   
</body>
<script>
     // 通过id查找html上的元素
     //时间
     var id1 = document.getElementById("id1")
     //支付方式
    var  id2 = document.getElementById("id2")
    //弹出时间
    var  id3 = document.getElementById("id3")
    //时间确认button
    var  id4 = document.getElementById("id4")
    //弹出支付方式
    var  id5 = document.getElementById("id5")
    //微信按钮
    var  id6 = document.getElementById("id6")
    //支付宝按钮
    var  id7 = document.getElementById("id7")
    // /给他添加响应事件
    id1.addEventListener("click", function(){
        id3.style.display = "flex"
    })

    id4.addEventListener("click",function(){
        id3.style.display = "none"
    })

    id2.addEventListener("click", function(){
        id5.style.display = "block"
    })

    id6.addEventListener("click",function(){
        id5.style.display = "none"
    })
    id7.addEventListener("click",function(){
        id5.style.display = "none"
    })
</script>
</html>